<template>
    <uni-popup ref="popup" type="bottom" :mask-click="false" :safe-area="false">
        <view class="level-selector">
            <!-- 标题栏 -->
            <view class="header">
                <view style="width: 54rpx;height: 54rpx;"></view>
                <text class="title">请选择答题级别</text>
                <image src="/static/xxclose.png" @click="handleClose" mode="widthFix"
                    style="width: 54rpx;height: 54rpx;"></image>
            </view>

            <!-- 级别选项 -->
            <view class="options-grid">
                <view class="option-item" :class="{ 'selected': selectedLevel === 'chuji' }"
                    @click="selectLevel('chuji')">
                    <text class="option-text">初级</text>
                </view>
                <view class="option-item" :class="{ 'selected': selectedLevel === 'zhongji' }"
                    @click="selectLevel('zhongji')">
                    <text class="option-text">中级</text>
                </view>
                <view class="option-item" :class="{ 'selected': selectedLevel === 'gaoji' }"
                    @click="selectLevel('gaoji')">
                    <text class="option-text">高级</text>
                </view>
                <view class="option-item" :class="{ 'selected': selectedLevel === 'zhuanjia' }"
                    @click="selectLevel('zhuanjia')">
                    <text class="option-text">专家级</text>
                </view>
                <view class="option-item" :class="{ 'selected': selectedLevel === 'dashi' }"
                    @click="selectLevel('dashi')">
                    <text class="option-text">大师级</text>
                </view>
            </view>

            <!-- 确认按钮 -->
            <view class="confirm-btn" @click="handleConfirm">
                <text class="confirm-text">确定</text>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, defineEmits } from 'vue'

const emit = defineEmits(['confirm', 'close'])

const popup = ref(null)
const selectedLevel = ref('chuji')

// 选择级别
const selectLevel = (level) => {
    selectedLevel.value = level
}

// 确认选择
const handleConfirm = () => {
    emit('confirm', selectedLevel.value)
    closePopup()
}

// 关闭弹窗
const handleClose = () => {
    emit('close')
    closePopup()
}

// 关闭弹窗方法
const closePopup = () => {
    popup.value?.close()
}

// 打开弹窗方法
const openPopup = () => {
    selectedLevel.value = 'chuji' // 默认选择初级
    popup.value?.open()
}

// 暴露方法给父组件
defineExpose({
    openPopup,
    closePopup
})
</script>

<style lang="scss" scoped>
.level-selector {
    width: 100%;
    background: #FFFFFF;
    border-radius: 24rpx;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding-top: 32rpx;
    padding-bottom: 32rpx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    position: relative;
    padding: 0 32rpx;
}

.title {
    font-size: 36rpx;
    font-weight: 600;
    color: #000000;
}

.close-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
}

.close-icon {
    font-size: 32rpx;
    color: #666666;
    font-weight: 500;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24rpx;
    margin-bottom: 40rpx;
    padding: 0 32rpx;
}

.option-item {
    height: 80rpx;
    border-radius: 16rpx;
    background: rgba(15, 80, 220, 0.08);
    border: 2rpx solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &:active {
        transform: scale(0.95);
    }

    &.selected {
        border-color: #0F50DC;
        background: rgba(15, 80, 220, 0.15);
    }
}

.option-text {
    font-size: 32rpx;
    color: #0F50DC;
    font-weight: 500;
}

.selected .option-text {
    font-weight: 600;
}

.confirm-btn {
    width: 240rpx;
    height: 84rpx;
    background: #0F50DC;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto;

    &:active {
        transform: scale(0.98);
        background: #1976D2;
    }
}

.confirm-text {
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 600;
}
</style>
